<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>选择日期</title>
        <link rel="stylesheet" href="css/frozen.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/zepto.min.js"></script>
        <script src="js/frozen.js"></script>
    </head>
    <body class="grey" ontouchstart="">
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>选择日期</h1>
        </header>
        <section class="ui-container mb50">
            <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
            <script>
				var root = 'http://fgm.cc/learn/calendar/price-calendar/';
				var config = {
				modules: {
				'price-calendar': {
				fullpath: root + 'price-calendar.js',
				type    : 'js',
				requires: ['']
				},
				'': {
				fullpath: root + '',
				type    : 'css'
				}
				}
				};
				YUI(config).use('price-calendar', 'jsonp', function(Y) {
				var sub  = Y.Lang.sub;
				var url = root + 'getData.asp?minDate={mindate}&maxDate={maxdate}&callback={callback}';
				//价格日历实例
				var oCal = new Y.PriceCalendar();
				//点击确定按钮
				oCal.on('confirm', function() {
					var storage=window.localStorage;
					storage.setItem("startdate",this.get('depDate'));
					//alert('入住日：' + this.get('depDate') + '\n离店日：' + this.get('endDate'));
					storage.setItem("enddate",this.get('endDate'));
					location.href="jiudian_tijiaodingdan.html?supplierId="+storage.getItem("supplierId");
				});
				//点击取消按钮
				oCal.on('cancel', function() {
					var storage=window.localStorage;
					var supplierId=storage.getItem("supplierId");
					location.href="jiudian_tijiaodingdan.html?supplierId="+supplierId;
					//this.set('depDate', '').set('endDate', '').render();
				});
				Y.one('#J_Example').delegate('click', function(e) {
				var that    = this,
				oTarget = e.currentTarget;
				switch(true) {
				//设置日历显示个数
				case oTarget.hasClass('J_Count'):
				this.set('count', oTarget.getAttribute('data-value')).render();
				break;
				//时间范围限定
				case oTarget.hasClass('J_Limit'):
				this.set('data', null)
				.set('depDate', '')
				.set('endDate', '')
				.set('minDate', '')
				.set('afterDays', oTarget.getAttribute('data-limit'));
				if(!oTarget.hasAttribute('data-date')) {
				this.set('date', new Date())
				}
				else {
				var oDate = oTarget.getAttribute('data-date');
				this.set('minDate', oDate);
				this.set('date', oDate);
				}
				oTarget.ancestor().one('.J_RoomStatus') ?
				oTarget.ancestor().one('.J_RoomStatus').setContent('\u663e\u793a\u623f\u6001').removeClass('J_Show') :
				oTarget.ancestor().append('<button class="J_RoomStatus">\u663e\u793a\u623f\u6001</button>');
				break;
				//异步拉取酒店数据
				case oTarget.hasClass('J_RoomStatus'):
				oTarget.toggleClass ('J_Show');
				if(oTarget.hasClass('J_Show'))
				Y.jsonp(
				sub(url, {
				mindate:this.get('minDate'),
				maxdate:this.get('maxDate')
				}),
				{
				on: {
				success: function(data) {
				that.set('data', data);
				oTarget.setContent('\u9690\u85cf\u623f\u6001')
				}
				}
				}
				);
				else {
				this.set('data', null);
				oTarget.setContent('\u663e\u793a\u623f\u6001');
				}
				break;
				}
				}, 'button', oCal);
				});
			</script>          
            <div id="J_Example" class="example">
       <!--     <button class="J_Count" data-value="1">单日历</button>
            <button class="J_Count" data-value="2">双日历</button>
            <button class="J_Count" data-value="3">三日历</button>
            <br />
            <button class="J_Limit" data-limit="90">限定范围（今天->90天）</button>-->
            </div>
        </section>        
    </body>
</html>
